<template>
  <div class="Talent_pool">
    <!-- <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="(v, k) in resumeTabs" :label="(v.title ? v.title : '暂无')" :name="k+''" :key="k"></el-tab-pane>
    </el-tabs> -->
    <div class="wrapper" v-loading="loading">
      <div class="resume-container">
        <div class="resumeInfo">
          <div class="resumeInfo-top">
            <div class="leftContent">
              <el-avatar class="avatar" :size="102" fit="cover" v-if="basicInfo.sex && basicInfo.sex == 1"
                :src="(basicInfo.photo || defaultMalePhoto)"></el-avatar>
              <el-avatar class="avatar" :size="102" fit="cover" v-else-if="basicInfo.sex && basicInfo.sex == 2"
                :src="(basicInfo.photo || defaultFemalePhoto)">

              </el-avatar>
            </div>
            <div class="centerContent">
              <div class="name">
                <div class="nameCont">
                  <h3>{{basicInfo.name || '暂无'}}</h3>
                  <div class="tag-group">
                    <el-tag type="info" effect="plain" v-if="basicInfo.express">快速投递</el-tag>
                    <!--  是否快速投递 true是，false否-->
                    <el-tag type="info" effect="plain" v-if="(basicInfo.publicity && basicInfo.publicity == 1)">对所有人公开
                    </el-tag>
                    <!-- 是否公开1：公开，2：保密 对所有人公开 -->
                  </div>
                </div>
                <div class="timeCont">
                  <span>更新于{{basicInfo.refreshTime ? new Date(basicInfo.refreshTime).pattern('yyyy年MM月dd日') : new Date().pattern('yyyy年MM月dd日')}}</span>
                </div>
              </div>
              <div class="ageJob">
                <p>
                  <span
                    class="prev-line">{{(basicInfo.sex && basicInfo.sex == 1 ? '男' : basicInfo.sex == 2 ?'女' :'暂无')}}</span>
                  <!-- 性别1男2 =>女 -->
                  <span
                    class="prev-line">{{((basicInfo.age && basicInfo.age !== '' && basicInfo.age !== null && String(basicInfo.age).split(' ').length >= 1) ? String(basicInfo.age).split(' ')[0] + '岁' : '暂无')}}</span>
                  <span class="prev-line">{{basicInfo.workExpText || '暂无'}}工作经验</span>
                  <span class="prev-line">{{basicInfo.currentResidenceText || '暂无'}}</span>
                </p>
                <p>
                  <span class="prev-line">{{basicInfo.job || '暂无'}}</span>
                  <span class="prev-line">{{basicInfo.company || '暂无'}}</span>
                </p>
              </div>
            </div>
            <div class="rightcontent">
              <el-button type="primary" class="refreshBtn" @click="clickRefreshResume (basicInfo.id)">刷新简历</el-button>
              <br />
              <el-button class="editBtn" @click="editResume(basicInfo.id)">编辑简历</el-button>
              <div class="rightcontenttime">
                <el-checkbox v-model="basicInfo.refresh" @change="isstartOrStop(basicInfo.id)"></el-checkbox>
                <span>自动刷新</span>
                <span><span>至{{basicInfo.ceaseRefreshTime | timedate}}</span><a href="javascript:;"
                    @click="startOrStop(basicInfo.id)">重置时间</a></span>
              </div>

            </div>
          </div>
        </div>
        <div class="resumeInfo-bottom">
          <p>
            <img src="../../../assets/img/icon/eye.png" alt />
            <span class="word">谁看过我</span>
            <span class="count">{{basicInfo.viewCount}}</span>
          </p>
          <p>
            <img src="../../../assets/img/icon/apply.png" alt />
            <span class="word">我的申请</span>
            <span class="count">{{statisticsCon.applyTotal}}</span>
          </p>
          <p>
            <img src="../../../assets/img/icon/collect.png" alt />
            <span class="word">我的收藏</span>
            <span class="count">{{statisticsCon.collectTotal}}</span>
          </p>
        </div>
      </div>
    </div>
    <Recommend :recommenid="RecommenId" @sendFavoriteOrCancelEvent="sendFavoriteOrCancelEvent"
      @sendApplayTotalEvent="sendApplayTotalEvent"></Recommend>
    <!-- <el-card class="mt12">
            <el-checkbox
                :indeterminate="isIndeterminate"
                v-model="checkAll"
                @change="handleCheckAllChange"
            >全选</el-checkbox>
            <span class="oneApply" @click="Apply">一键申请</span>
            <span class="oneRecommend">根据求职意向给您推荐</span>
            <span class="oneChange">换一批</span>
        </el-card>
        <el-card class="listContainer mt11" v-for="(item, index) in tableData" :key="index">
            <el-checkbox-group v-model="checkedResumes" @change="handleCheckedCitiesChange">
                <div class="list">
                    <div class="listLeft">
                        <el-checkbox :label="item" :key="index">.</el-checkbox>
                        <div class="info">
                            <div class="name">{{item.name}}</div>
                            <div class="ageAdress">
                                <span class="salary">{{item.minWage/1000}}K -{{item.maxWage / 1000}}</span>
                                <p class="area">
                                    <span>{{item.workAreaText || '无'}} &nbsp;</span>|
                                    <span>&nbsp; {{item.workExpText || '无'}} &nbsp;</span>|
                                    <span>&nbsp;{{item.educationText || '学历不限'}}</span>
                                </p>
                            </div>
                            <div class="tag-group">
                                <el-tag
                                    type="info"
                                    effect="plain"
                                    v-for="(allure, allureIndex) in item.allureText"
                                    :key="allureIndex"
                                >{{allure}}</el-tag>
                            </div>
                        </div>
                    </div>
                    <div class="listRight">
                        <div class="compaName">
                            <div class="info">
                                <div class="name">{{item.companyInfo.name}}</div>
                                <div class="compaNameageAdress">
                                    <p class="area">
                                        <span>{{item.natureText}} &nbsp;</span>|
                                        <span>&nbsp;{{item.scaleText || '暂无'}} &nbsp;</span>
                                    </p>
                                </div>
                                <div></div>
                            </div>
                        </div>
                        <div class="companyLogo">
                            <div class="logo">
                                <img
                                    :src="'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587807821637&di=a5c74bc4caba28c63c27e4f6cc392cc5&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F7Po3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F267f9e2f07082838685c484ab999a9014c08f11f.jpg'"
                                    alt
                                />
                            </div>
                            <span class="collection">
                                <i class="el-icon-star-off"></i>&nbsp;收藏
                            </span>
                            <span class="oneApplyTwo">一键申请</span>
                        </div>
                    </div>
                </div>
            </el-checkbox-group>
        </el-card>-->
  </div>
</template>
<script>
import '../../../utils/common.js';
// 根据求职意向为您推荐
import Recommend from '@/components/page/components/home_Recommend';
import { selectResumeList } from '../../../api/index.js';
import { refreshResume, startOrStop } from '../../../api/resumeEdit.js';
import { applyTotal, collectTotal } from '../../../api/personalCenter.js';
export default {
  name: 'PersonalCenter',
  data () {
    return {
      loading: true,
      // 默认简历id
      RecommenId: '',
      //  默认简历头像男
      defaultMalePhoto: require('../../../assets/img/avatar.png'),
      // 默认简历头像女
      defaultFemalePhoto: require('../../../assets/img/female.png'),
      id: null,
      resumeTabs: [],
      basicInfo: {},
      activeName: '0',
      isIndeterminate: false,
      checkAll: false,
      checkedResumes: [],
      tableData: [
        // {
        //   name: '5月7日159发布职位',
        //   natureText: '兼职',
        //   workAreaText: '海淀区',
        //   workExpText: '5-10年',
        //   educationText: '硕士',
        //   minWage: 1,
        //   maxWage: 12,
        //   allureText: '每年多次调薪,健身俱乐部,高温补贴,节日福利,创业公司,不加班,14薪,带团队',
        //   companyInfo: {
        //     name: '科锐特科技有限公司',
        //     natureText: '20人以下'
        //   },
        //   id: 0,
        //   companyId: 3
        // },
        // {
        //   name: '5月8日58发布职位',
        //   natureText: '全职',
        //   workAreaText: '海淀区',
        //   workExpText: '3-10年',
        //   educationText: '硕士',
        //   minWage: 1,
        //   maxWage: 12,
        //   allureText: '每年多次调薪,健身俱乐部',
        //   companyInfo: {
        //     name: '华安机车产品新技术开发有限公司',
        //     natureText: '20人以下'
        //   },
        //   id: 1,
        //   companyId: 4
        // }
      ],
      // 下面的谁看过我。申请收藏的容器
      statisticsCon: {
        applyTotal: 0,
        collectTotal: 0
      },
      userId: null,
      current: true
    };
  },
  created () {
    this.userId = localStorage.getItem('ps_userId');
  },
  components: {
    Recommend
  },
  mounted () {
    this.initialData();
  },
  filters: {
    timedate (val) {
      if (val) {
        let time = /\d{4}-\d{1,2}-\d{1,2}/g
          .exec(val)
          .toString()
        return time
      }
    },


  },
  methods: {
    // 初始化加载数据
    initialData () {
      this.getResumeTabs();
      this.getApplyTotal();
      this.getCollectTotal();
      this.getResumeList();
    },
    // 获取简历列表数据
    getResumeList () {
      this.tableData.map(item => {
        if (item.allureText) {
          item.allureText = item.allureText.split(',');
        }
      });
    },
    // 获取简历tab切换数据
    getResumeTabs () {
      selectResumeList()
        .then(res => {
          if (res.success) {
            this.loading = false;
            this.resumeTabs = res.data || [];
            if (this.resumeTabs.length > 0) {
              this.basicInfo = this.resumeTabs[0];
              this.RecommenId = res.data[0].id;
              this.roundchecked = res.data[0].refresh
              if (this.resumeTabs.length < 3) {
                let defaultResume = {
                  title: '添加简历',
                  id: -1
                };
                this.resumeTabs.push(defaultResume);
              }
            }
          } else {
            this.$message.error(`${res.msg}`);
          }
        })
        .catch(error => {
          console.log(error, '错误信息');
          this.loading = false;
        });
    },
    // 获取申请总数
    getApplyTotal () {
      let condition = [];
      condition.push({ column: 'user_id', type: 'eq', value: this.userId });
      let formData = new FormData();
      formData.append('condition', JSON.stringify(condition));

      applyTotal(formData).then(res => {
        if (res.success) {
          this.statisticsCon.applyTotal = res.data;
        } else {
          this.$message.error(`${res.msg}`);
        }
      });

    },
    // 获取收藏总数
    getCollectTotal () {
      let condition = [];
      condition.push({ column: 'user_id', type: 'eq', value: this.userId });
      let formData = new FormData();
      formData.append('condition', JSON.stringify(condition));
      collectTotal(formData).then(res => {
        if (res.success) {
          this.statisticsCon.collectTotal = res.data;
        } else {
          this.$message.error(`${res.msg}`);
        }
      });
    },
    // 《《《《《-------------------------------------   事件处理 --------------------------------------》》》》》
    // 简历切换
    handleClick (tab, event) {
      let id = this.resumeTabs[tab.name].id;
      this.RecommenId = id;
      let item = this.resumeTabs[tab.name];
      this.basicInfo = item;
      if (id === -1) {
        this.$router.push('/resume-edit');
      }
    },

    // 一键申请
    Apply () {
      let that = this;
      if (that.checkedResumes.length <= 0) {
        this.$message.error('请选择');
        return false;
      }
      let idArr = [];
      that.checkedResumes.map(item => {
        idArr.push({
          jobId: item.id,
          companyId: item.companyId
        });
      });
    },
    // 点击全选
    handleCheckAllChange (val) {
      this.checkedResumes = val ? this.tableData : [];
      this.isIndeterminate = false;
    },
    // 选中
    handleCheckedCitiesChange (value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.tableData.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.tableData.length;
    },
    // 《《《《《-------------------------------------   获取子组件的方法 --------------------------------------》》》》》
    // 获取子组件传过来的收藏总数
    sendFavoriteOrCancelEvent (total) {
      this.statisticsCon.collectTotal = total;
    },
    // 获取子组件传过来的申请总数
    sendApplayTotalEvent (total) {
      this.statisticsCon.applyTotal = total;
    },
    // 刷新简历
    clickRefreshResume (id) {
      refreshResume(id).then(res => {
        if (res.success) {
          this.$notify({
            type: 'success',
            message: '刷新成功'
          });
          return false;
        } else {
          this.$message.error(`${res.msg}`);
        }
      });
    },
    isstartOrStop (id) {
      if (this.basicInfo.refresh) {
        this.$confirm('开启自动刷新后将，简历将每天刷新时间，保证简历被更多企业检索', '自动刷新', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.startOrStop(id)
        }).catch(action => {
          this.basicInfo.refresh = false
        });
      } else {
        this.startOrStop(id)
      }

    },
    //自动刷新简历
    startOrStop (id) {
      let formData = new FormData();

      formData.append('id', id);
      formData.append('refresh', JSON.stringify(this.basicInfo.refresh));
      startOrStop(formData).then(res => {
        if (res.success) {
          this.basicInfo.ceaseRefreshTime = res.data

          return false;
        } else {
          this.$message.error(`${res.msg}`);
        }
      });

    },
    // 编辑简历
    editResume (id) {
      this.$router.push({
        path: '/resume-edit',
        query: {
          id: id
        }
      });
    }
  }
};
</script>

<style lang="css" scoped>
.Talent_pool {
    padding-bottom: 40px;
}
.Talent_pool /deep/.el-tabs--border-card > .el-tabs__content {
    padding: 0;
}
.Talent_pool /deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item {
    text-align: center;
}
.wrapper {
    height: 230px;
    background: #fff;
}
.resume-container {
    /* border:1px solid blue; */
}

.resumeInfo {
    height: 174px;
    box-sizing: border-box;
}
.resumeInfo-bottom {
    height: 56px;
    margin-left: 45px;
    margin-right: 43px;
    border-top: 1px solid #e8e8e8;
    display: flex;
}
.resumeInfo-bottom p {
    flex: 1;
    line-height: 56px;
    text-align: center;
}
.resumeInfo-bottom p span {
    display: inline-block;
    height: 20px;
    line-height: 20px;
}
.resumeInfo-bottom p img {
    vertical-align: text-bottom;
}
.resumeInfo-bottom p .word,
.resumeInfo-bottom p .count {
    color: #555555;
}
.resumeInfo-bottom p .word {
    font-size: 14px;
    margin: 0 10px 0 5px;
}
.resumeInfo-bottom p .count {
    font-size: 20px;
}

.resumeInfo-top {
    height: calc(100% - 56px);
    padding-top: 21px;
    display: flex;
    justify-content: space-around;
    box-sizing: border-box;
}
.leftContent,
.rightcontent {
    width: 168px;
    text-align: center;
}
.centerContent {
    flex: 1;
}
.centerContent .nameCont {
    display: flex;
}
.centerContent .nameCont h3 {
    font-size: 18px;
    color: #333333;
}
.centerContent .tag-group {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    margin-left: 18px;
}
.centerContent .tag-group .el-tag--plain.el-tag--info {
    margin-right: 10px;
    border-color: #1893fc;
    color: #1893fc;
}
.centerContent .timeCont {
    margin-top: 10px;
}
.centerContent .timeCont span,
.centerContent .ageJob span {
    color: #555555;
    font-size: 14px;
}
.centerContent .ageJob {
    margin-top: 21px;
}
.centerContent .ageJob p:last-child {
    margin-top: 8px;
}
.centerContent .ageJob .prev-line:not(:first-child)::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    margin: -2px 10px 0;
    width: 1px;
    height: 12px;
    background-color: #707070;
}
.people-info {
    flex: 1;
}
.rightcontent {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.rightcontent .refreshBtn {
    margin-top: 15px;
}
.rightcontenttime {
    width: 300px;
    margin: 10px 200px 0 0;
    font-size: 14px;
    text-align: right;
}
.rightcontenttime span {
    margin-right: 10px;
}
.rightcontent .editBtn {
    /* margin-top: 10px; */
}
.avatar {
    font-size: 45px;
    margin-top: 25px;
}
.avatar /deep/ img {
    width: 100%;
    height: 100%;
}
.resumeInfo-bottom {
    height: 56px;
    margin-left: 45px;
    margin-right: 43px;
    border-top: 1px solid #e8e8e8;
    display: flex;
}
.resumeInfo-bottom p {
    flex: 1;
    line-height: 56px;
    text-align: center;
}
.resumeInfo-bottom p span {
    display: inline-block;
    height: 20px;
    line-height: 20px;
}
.resumeInfo-bottom p img {
    vertical-align: text-bottom;
}
.resumeInfo-bottom p .word,
.resumeInfo-bottom p .count {
    color: #555555;
}
.resumeInfo-bottom p .word {
    font-size: 14px;
    margin: 0 10px 0 5px;
}
.resumeInfo-bottom p .count {
    font-size: 20px;
}

.mt12 {
    margin-top: 12px;
}
.mt11 {
    margin-top: 11px;
}
.oneApply {
    width: 94px;
    height: 24px;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    color: rgba(255, 255, 255, 1);
    margin: 0 10px;
    margin-left: 35px;
    display: inline-block;
    cursor: pointer;
    opacity: 1;
}
.oneRecommend {
    width: 140px;
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 16px;
    color: rgba(85, 85, 85, 1);
    opacity: 1;
}
.oneChange {
    float: right;
    width: 50px;
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 16px;
    color: rgba(85, 85, 85, 1);
    opacity: 1;
    cursor: pointer;
}
.Talent_pool /deep/ .el-card {
    border: none;
}
.Talent_pool /deep/.el-card__body {
    padding: 13px;
}
.disablecole {
    color: #c0c4cc;
    cursor: not-allowed;
}
/* .listContainer {
    height: 140px;
}
.list {
    width: calc(100% - 40px);
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
}
.listLeft {
    height: calc(100% - 40px);
    width: calc(100% - 40px);
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}
.listLeft .info {
    width: 355px;
    display: flex;
    flex-direction: column;
}
.info .name {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
}
.salary {
    height: 38px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 38px;
    color: rgba(253, 78, 64, 1);
}
.area {
    height: 38px;
    margin-left: 35px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 38px;
    color: rgba(85, 85, 85, 1);
}
.ageAdress {
    display: flex;
    justify-content: flex-start;
    height: 50px;
    align-items: center;
}
.tag-group {
    display: inline-block;
    height: 20px;
    line-height: 20px;
}
.tag-group .el-tag--plain.el-tag--info {
    color: #555555;
    border-color: #cccccc;
    margin-right: 10px;
}
.listRight {
    width: calc(100% - 40px);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
}
.listRight .compaName {
    width: 200px;
    height: 100%;
}
.compaNameageAdress .area {
    height: 50px;
    margin-left: 0px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 50px;
    color: rgba(85, 85, 85, 1);
}
.listRight .companyLogo {
    width: 94px;
    height: 100%;
}
.companyLogo .logo {
    width: 68px;
    height: 68px;
    position: absolute;
    right: 0;
    background: rgba(242, 242, 242, 1);
    opacity: 1;
    border-radius: 6px;
}
.companyLogo .logo img {
    width: 100%;
    height: 100%;
}
.collection {
    width: 50px;
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 16px;
    color: rgba(85, 85, 85, 1);
    display: inline-block;
    opacity: 1;
    position: absolute;
    top: 96px;
    right: 140px;
    cursor: pointer;
}
.oneApplyTwo {
    width: 94px;
    height: 24px;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    color: rgba(255, 255, 255, 1);
    display: inline-block;
    cursor: pointer;
    position: absolute;
    top: 90px;
    opacity: 1;
} */
</style>
